<template>
    <div class="sidebar">
        <el-scrollbar class="scroll-wrapper">
            <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse"  @select='changeRouter' unique-opened router>
                <subItem :items="items" :collapse="collapse" />
            </el-menu>
        </el-scrollbar>
        <div class="slideIn" @click="changeCollapse">||</div>
    </div>
</template>

<script>
import bus from "@/utils/eventBus.js";
import subItem from "./subitem";
export default {
    data() {
        return {
            collapse: false,
            items: [
                {
                    name:'首页',
                    url:'/home',
                    icon:'el-icon-s-home'
                },
                {
                    name:'表格示例',
                    url:'/mytable',
                    icon:'el-icon-s-grid'
                },
                {
                    name:'关于我们',
                    url:'/about',
                    icon:'el-icon-office-building'
                }
            ]
        }
    },
    computed: {
        onRoutes(res) {
            var index = this.$route.path.lastIndexOf("/");
            var url = this.$route.path;
            if(this.$route.path.substring(index) == '/add' || this.$route.path.substring(index) == '/detail' || this.$route.path.substring(index) == '/edit'){
                url = this.$route.path.substring(0,index)
            }
            return url;
        }
    },
    components: {
        subItem
    },
    created() {
        bus.$on("collapse", msg => {
            this.collapse = msg;
        });
    },
    methods: {
        changeRouter(url, res) {
            url = url.replace("/", "").split("?")[0]
        },
        changeCollapse() {
            this.collapse = !this.collapse;
            bus.$emit("collapse", this.collapse);
        },
    },
}
</script>

<style lang="less">
    .sidebar{
        position: fixed;
        left: 0;
        top: 70px;
        height: calc(100% - 70px);
        z-index: 99;
        .scroll-wrapper{
            height: 100%;
            .el-scrollbar__wrap{
                overflow-x: hidden;
            }
            .el-scrollbar__view{
                height: 100%;
            }
        }
        .sidebar-el-menu{
            height: 100%;
            // border-right: none;
            // background-color: #031528;
            &:not(.el-menu--collapse) {
                width: 210px;
            }
        }
        .slideIn{
            width: 10px;
            height: 80px;
            line-height: 80px;
            color: #ff6633;
            border: 1px solid #ff6633;
            border-radius: 0 9px 9px 0;
            font-weight: bold;
            transform: translateY(-50%);
            position: absolute;
            right: -10px;
            top: 50%;
            cursor: pointer;
        }
    }
</style>